<template>
  <div>
    <el-form ref="form" :model="searchForm" :inline="true">
  <el-form-item>
    <el-input v-model="searchForm.name" placeholder="请输入需要搜索的内容"></el-input>
  </el-form-item>
  <template>
   <template style="text-align: center;">添加时间</template>
  <el-time-picker style="margin-left:9px ;" v-model="value1" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }" placeholder="选择开始时间">
  </el-time-picker>
  <el-time-picker style="margin-left:9px ;" arrow-control v-model="value2"  :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }" placeholder="选择截止时间" >
  </el-time-picker>
</template>

  <el-form-item >
    <el-button style="margin-left:10px ;" @click="loadOrderList">搜索</el-button>
    <el-button type="info" style="margin-right:5px ;" @click="resetForm">清空</el-button>
    <el-popconfirm title="确定删除订单信息吗？" @confirm="deleteOrder">
    <el-button slot="reference" type="danger" :disabled="deleteAllBtnStu">批量删除</el-button>
   </el-popconfirm>
  </el-form-item>
 </el-form>
 <el-table :data="tableData" border stripe  style="width: 100%; margin-bottom:20px;" :cell-style="{padding:'2px'}" @selection-change="selectionChange">
  <el-table-column type="selection" width="50">
    </el-table-column>
    <el-table-column label="订单编号" width="80" prop="id">
      </el-table-column>
      <el-table-column label="用户ID(手机号)" width="120" prop="uid">
      </el-table-column>
      <el-table-column label="用户名" width="110" prop="aid">
      </el-table-column>
      <el-table-column label="电影名称" width="220" prop="movie">
      </el-table-column>
      <el-table-column label="座位" width="220" prop="seats">
      </el-table-column>
      <el-table-column label="电影开始时间" width="200" prop="start">
      </el-table-column>
      <el-table-column label="金额" width="100" prop="price">
      </el-table-column>
      <el-table-column  width="100" prop="statu" label="状态" show-overflow-tooltip column-key="statu"
          :filters="[
            { text: '支付成功', value: 1 },
            { text: '支付失败', value: 0 },
          ]"
          :filter-method="filterHandler"
          :filter-multiple="true"
        >
        <template slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.statu===1" type="success">支付成功</el-tag>
        <el-tag size="mini" v-else-if="scope.row.statu===0" type="danger">支付失败</el-tag>
        </template>
        </el-table-column>
      <!-- <el-table-column label="状态" width="100">
        <template slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.statu===1" type="success">支付成功</el-tag>
        <el-tag size="mini" v-else-if="scope.row.statu===0" type="danger">支付失败</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="添加时间"  width="200" prop="created">
        <template slot-scope="scope">
          {{ scope.row.created | fmtDate }}
        </template>
      </el-table-column>
      <el-table-column label="支付时间"  width="200" prop="pay_at">
        <template slot-scope="scope">
          {{ scope.row.pay_at | fmtDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="70">
        <template slot-scope="scope">
        <el-popconfirm title="确定该订单信息吗？" @confirm="deleteOrder(scope.row.id)">
        <el-button slot="reference" type="text">删除</el-button>
        </el-popconfirm>
        </template>
      </el-table-column>
   </el-table>
   <el-pagination background layout="total, sizes,prev, pager, next,jumper" :total="total" :page-size="size" :page-sizes="[5,10,15,20,25]" :current-page="current">
  </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selection:[],
      searchForm:{},
      deleteAllBtnStu:true,  //批量删除按钮默认不可用
      dialogFormVisible:false,
      value1: '',
      value2: '',
      tableData:[],
      total: 0,
      size: 10,
      current: 1,
    }
  },
  created() {
    this.loadOrderList();
  },
  filters:{
    fmtDate:(value)=> {
      let date=new Date(value)
      let y=date.getFullYear()
      let M=(date.getMonth()+1).toString().padStart(2,'0')
      let d=date.getDate().toString().padStart(2,'0')
      let h=date.getHours().toString().padStart(2,'0')
      let m=date.getMinutes().toString().padStart(2,'0')
      let s=date.getSeconds().toString().padStart(2,'0')

      return `${y}年${M}月${d}日 ${h}:${m}:${s}`
    }
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    resetForm(){
     this.searchForm={}
     this.value1={}
     this.value2={}
    },
    deleteOrder(id){
      let ids=[]
      id?ids.push(id):this.selection.forEach(u=>{
        ids.push(u.id)
      })
      this.$axios.post('/system/order/delete',ids).then(response=>{
        this.$message({
            message:response.data.message,
            type:'success',
            showClose:true,
           onClose:()=>{
            this.loadOrderList()
           }
        });
      })
    },
    loadOrderList(){
      this.$axios.get('/system/order/list',{
        current:this.current,
        size:this.size,
      }).then(response=>{
        this.tableData= response.data.data.records
        this.total=response.data.data.total
        this.size=response.data.data.size
        this.current=response.data.data.current
      })
    },
    selectionChange(value){
      this.selection=value
      if(this.selection){
        //有数据便是有选中的
        this.deleteAllBtnStu=(this.selection.length===0)  //或false
      }
    }

  },
  components: {
  }
}
</script>

<style scoped>
.el-table__body {
  font-size: 14px;
}

.el-button:hover {
  color: #333
}

.el-popconfirm-reference {
  cursor: pointer;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
}

.el-tag {
  font-size: 12px;
  padding: 2px 6px;
}

.el-table-column--selection {
  text-align: center;
}

.el-avatar {
  border-radius: 50%;
}

.el-divider {
  margin: 0 6px;
}

/*上传头像*/
/*.avatar-uploader {*/
/*  border: 1px dashed #d9d9d9;*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-dialog {
  text-align: center;
}

/* Style the dialog header */
.el-dialog__header {
  background-color: #2f4050;
  color: #fff;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}

/* Style the dialog title */
.el-dialog__title {
  font-size: 22px;
  font-weight: bold;
  padding: 20px;
}

/* Style the form labels */
.el-form-item__label {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

/* Style the input fields */
.el-input__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
}

/* Style the radio buttons */


.el-radio-button {
  flex: 1;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
  border-radius: 0 0 4px 4px;
}

.dialog-footer .el-button {
  margin-left: 10px;
  border-radius: 4px;
}

.dialog-footer .el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.dialog-footer .el-button--primary:active {
  background-color: #3a8ee6;
  border-color: #3a8ee6;
}

.dialog-footer .el-button--default {
  color: #333;
  border-color: #dcdfe6;
}

.dialog-footer .el-button--default:hover {
  color: #409EFF;
  border-color: #409EFF;
}
</style>
